<template>
    <view class="context">
        <view class="close">
            <uv-button @click="emit('close')" :customStyle="submitButton" type="primary" text="确定"></uv-button>
        </view>
        <view class="easyinput">
            <uni-easyinput prefixIcon="search" :styles="{ borderColor: '#FD754C', color: '#333', disableColor: '#eee' }"
                placeholder="搜索用户" trim="all" v-model="value" focus @confirm="start"></uni-easyinput>
        </view>
        <view class="scrollview" v-if="!loading">
            <lyTree v-if="treeData.length" :tree-data="treeData" :ready="true" ref="tree" :highlightCurrent="true"
                :showCheckbox="true" :autoExpandParent="false" :checkOnlyLeaf="true" node-key="id"
                :expandOnCheckNode="false" :props="{ label: 'name', children: 'children', disabled: 'disabled' }"
                @node-expand="handleNodeExpand" :defaultCheckedKeys="users.map(e => e.id)" @node-click="handleNodeClick"
                @check="check">
            </lyTree>
        </view>

    </view>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, type StyleValue } from 'vue'
import api from '../../api/index'
const p = defineProps<{ modelValue: Eps.TenantUserEntity[] | Eps.TenantUserEntity, multiple?: boolean }>()
import lyTree from '../ly-tree/ly-tree.vue'
const value = ref<string>('')

const emit = defineEmits(['update:modelValue', 'close'])

const submitButton: StyleValue = {
    background: 'linear-gradient(to right, #FF935B, #FD754C);',
    color: '#ffffff',
    borderWidth: '0px',
    borderColor: 'rgba(0,0,0,0)'
}

const list = ref<Eps.TenantUserEntity[]>([])


const users = ref(Array.isArray(p.modelValue) ? p.modelValue : p.modelValue ? [p.modelValue] : [])

const treeData = ref<Eps.DeptEntity[]>([])

const loading = ref(false)


function handleNodeClick(obj: any) {
}
function handleNodeExpand(obj: any) {
}

function check(obj: { checked: boolean, data: Eps.TenantUserEntity }) {
    const { data } = obj
    if (typeof data.dept_from === 'string') {
        const t = users.value.findIndex(c => c?.id === data.id)
        if (t > -1) {
            users.value.splice(t, 1)
        } else {
            if (p.multiple) {
                users.value.push(data)
            } else {
                users.value = [data]
            }
        }
        if (p.multiple) {
            emit('update:modelValue', users.value)
        } else {
            emit('update:modelValue', data)
        }
    }
}


function start() {
    loading.value = true
    api<Eps.DeptEntity[]>('/wechat/dept/treedeptuser', { value: value.value }).then(c => {
        treeData.value = c
        loading.value = false
    })
}


onMounted(() => {
    api<Eps.TenantUserEntity[]>('/wechat/user_teant/list')
        .then(e => {
            list.value = e
        })
    start()
})



watch(() => p.modelValue, () => {
    users.value = Array.isArray(p.modelValue) ? p.modelValue : p.modelValue ? [p.modelValue] : []
})

defineExpose({
    list
})

</script>

<style scoped lang="scss">
.context {
    display: flex;
    height: 100%;
    flex-direction: column;
    position: relative;

    .close {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        position: fixed;
        bottom: 36px;
        right: 24px;
        z-index: 99;
    }

    .easyinput {
        height: 80rpx;
        padding: 36rpx;
    }

    .scrollview {
        display: flex;
        flex-direction: column;
        padding-left: 36rpx;
        padding-right: 36rpx;
        flex: 1;
        max-height: 700rpx;

    }

}
</style>